<template>
  <div style="border: 1px solid #ccc">
    <Toolbar style="border-bottom: 1px solid #ccc" :editor="editor" :defaultConfig="toolbarConfig" :mode="mode" />
    <Editor style="height: 500px; overflow-y: hidden" v-model="html" :defaultConfig="editorConfig" :mode="mode"
      @onCreated="onCreated" @onChange="onChange"  />
  </div>
</template>
<!-- <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://unpkg.com/@wangeditor/editor@latest/dist/index.js"></script> -->
<script>
import Vue from "vue";
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
import { SlateElement } from "@wangeditor/editor";
// or
import * as qiniu from 'qiniu-js'
import { url } from '@/utils/url';

// const E = window.wangEditor
// //改变语言
// const LANG = location.href.indexOf("lang=en") > 0 ? "en" : "zh-CN";
// E.i18nChangeLanguage(LANG);

const editorConfig = { MENU_CONF: {} };
// editorConfig.MENU_CONF["insertImage"] = {
//   onInsertedImage(imageNode) {
//     if (imageNode == null) return;

//     const { src, alt, url, href } = imageNode;
//     console.log("inserted image", src, alt, url, href);
//   },
//   checkImage: customCheckImageFn, // 也支持 async 函数
//   parseImageSrc: customParseImageSrc, // 也支持 async 函数
// };

editorConfig.MENU_CONF["uploadImage"] = {
  server: 'https://upload-z1.qiniup.com',
  timeout: 5 * 1000, // 5s
  fieldName: "custom-fileName",
  meta: { token: "xxx", a: 100 },
  metaWithUrl: true, // 将参数连接到url
  headers: { Accept: "text/x-json" },

  maxFileSize: 10 * 1024 * 1024, // 10M
  base64LimitSize: 5 * 1024, // 如果文件大小小于5kb，则插入base64格式

  //再上传之前
  onBeforeUpload(file) {
    console.log("onBeforeUpload", file);

    return file; //将上传此文件  false:阻止上传
  },

  onProgress(progress) {
    console.log("onProgress", progress);
  },
  onSuccess(file, res) {
    console.log("onSuccess", file, res);
  },
  onFailed(file, res) {
    alert(res.message);
    console.log("onFailed", file, res);
  },
  onError(file, err, res) {
    alert(err.message);
    console.error("onError", file, err, res);
  },
};
// 自定义校验图片
function customCheckImageFn(src, alt, url) {
  // JS 语法
  if (!src) {
    return;
  }
  if (src.indexOf("http") !== 0) {
    return "图片网址必须以 http/https 开头";
  }
  return true;

  // 返回值有三种选择：
  // 1. 返回 true ，说明检查通过，编辑器将正常插入图片
  // 2. 返回一个字符串，说明检查未通过，编辑器会阻止插入。会 alert 出错误信息（即返回的字符串）
  // 3. 返回 undefined（即没有任何返回），说明检查未通过，编辑器会阻止插入。但不会提示任何信息
}
// 转换图片链接
function customParseImageSrc(src) {
  // JS 语法
  if (src.indexOf("http") !== 0) {
    return `http://${src}`;
  }
  return src;
}

export default Vue.extend({
  props: ['qiNiuToken','html'],
  components: { Editor, Toolbar },
  data() {
    return {
      editor: null, //编辑器的实例 执行api会用
      html: "",
      toolbarConfig: {}, //工具栏配置
      editorConfig: {
        placeholder: "请编辑商品内容",
        MENU_CONF: {
          //   配置上传图片
          uploadImage: {
            customUpload: async (file, insertFn) => {
              let resultUrl = await this.upqiniu(file, file.name);
              insertFn(resultUrl);
            },
          },
        },
      },



      mode: "default", //default or 'simple'
    };
  },
  methods: {

    upqiniu(file, name) {
      console.log('当前传递过来的this.$props.qiNiuToken=='+this.$props.qiNiuToken)
      return new Promise((resolve) => {
        let config = {
          useCdnDomain: true, //表示是否使用 cdn 加速域名，为布尔值，true 表示使用，默认为 false。
          region: qiniu.region.z1, // 根据具体提示修改上传地区,当为 null 或 undefined 时，自动分析上传域名区域
         
        };
        let putExtra = {
          
          fname: `upload_pic_${name}`, //文件原文件名
          params: {
           
          }, //用来放置自定义变量
          mimeType: null, //用来限制上传文件类型，为 null 时表示不对文件类型限制；限制类型放到数组里： ["image/png", "image/jpeg", "image/gif"]
        };
        var observable = qiniu.upload(
          file,
          `image/public/goodsPic/pic_${new Date().getTime()}_${name}`,
          this.$props.qiNiuToken,
          putExtra,
          config
        );
        observable.subscribe({
          next: (result) => {
            // 主要用来展示进度
          },
          error: (errResult) => {
            // 失败报错信息
          },
          complete: (result) => {
            // 接收成功后返回的信息
            let imagUrl = url.imgHead + result.key;
            console.log("当前imageUrl ====== "+imagUrl)
            resolve(imagUrl);
          },
        });
      });
    },

    onCreated(editor) {
      //onCreated 要放在 Editor组件里
      this.editor = Object.seal(editor); // 一定要用 Object.seal() ，否则会报错
    },

    //onChange要放在 Editor组件里
    onChange(editor) {
      // console.log("onChange", editor.getHtml()); // onChange 时获取编辑器最新内容
      // console.log("getText", editor.getText()); //获取当前编辑器的纯文本内容
      this.$emit("changeTxt", this.html)
    },
  },

  watch:{
    html(newValue,oldValue){
      console.log('html值改变了：', newValue, '旧值为：', oldValue);  
      // 在这里执行你的回调函数逻辑  
    }
  },
  mounted() {
    // 模拟 ajax 请求，异步渲染编辑器
    setTimeout(() => {
        
    }, 1500);

   
  },

  updated(){
    
  },

  beforeDestroy() {
    //销毁编译器
    const editor = this.editor;
    if (editor == null) return;
    editor.destroy(); // 组件销毁时，及时销毁编辑器
  },
});
</script>

<style src="@wangeditor/editor/dist/css/style.css"></style>
